<template>
  <div>
    <div>
      <img class='item__img' :src="item.url" alt="">
    </div>
    <div class="item__right">
      <div class="item__line">
        <router-link :to="'/seller/'+ item.id + '/goods'" tag="h4" class="item__title"><span class="title__icon">品牌</span>{{item.storeName}}</router-link>
        <ul class="item__icon">
          <li v-for="(icon, index) of item.list"
              :key="index">{{icon}}</li>
        </ul>
      </div>
      <div class="item__line">
        <div>
          <span class="star">
            <Star :score="item.score"></Star>
          </span>
          <span class="score">{{item.score}}</span>
          <span class="status">月售<span>{{item.sum}}</span>单</span>
        </div>
        <div>
          <ul class="item__icon">
            <li class="icon__fengniao" v-if="item.bird">蜂鸟专送</li>
            <li class="icon__ontime" v-if="item.onTime">准时达</li>
          </ul>
        </div>
      </div>
      <div class="item__line feeinfo">
        <div class="price">
          <span>￥{{item.least}}起送&nbsp;/</span>
          <span>配送费约<span>￥{{item.deliverFee}}</span></span>
        </div>
        <div class="distance">
          <span><span>{{item.deliverDistance}}</span>公里&nbsp;/</span>
          <span><span>{{item.deliverTime}}</span>分钟</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Star from '@/pages/common/Star.vue'
export default {
  name: 'SellerItem',
  props: {
    item: Object
  },
  components: {
    Star
  }
}
</script>

<style lang='scss' scoped>
  @import '~@/assets/style/common';
  li > div {
    display: flex;
    padding: 10px 4px;
    .item__img {
      width: 140px;
      height: 140px;
      margin-right: 8px;
    }
    .item__right {
      display: flex;
      flex: 1;
      overflow: hidden;
      flex-direction: column;
      justify-content: space-between;
      .item__line {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .item__title {
          width: 70%;
          font-size: 32px;/*px*/
          font-weight: 700;
          color: #333;
          @include omit;
          .title__icon {
            padding: 5px;
            margin-right: 4px;
            font-size: 24px;/*px*/
            background: #ffd930;
            color: #333;
          }
        }
        &.feeinfo {
          font-size: 28px;
          .price {
            color: #666;
          }
          .distance > span:last-child {
            color: #25a4bb;
          }
        }
        .status {
          color: #727272;
        }
        .score {
          color: #ff6000;
        }
      }
      .item__icon {
        display: flex;
        li {
          border-radius: 4px;
          padding: 2px;
          margin-right: 4px;
          color: #999;
          border: 1px solid #ccc;
        }
        .icon__fengniao {
          color: #fff;
          background: #25a4bb;
        }
        .icon__ontime {
          color: #25a4bb;
          border-color: #25a4bb;
        }
      }
    }
  }
</style>
